<template>
  <div style="display: inline-block; margin: 0 12px">
    <el-button type="primary" @click="createCodeFn">代码生成</el-button>
    <HfDrawer title="生成代码" ref="createCodeDioRef">
      <template #content><div id="coder"></div></template>
      <template #confirm>
        <el-button @click="copyCode" type="primary">复制</el-button>
      </template>
    </HfDrawer>
  </div>
</template>
<script setup lang="ts">
import { utilCopyLink, utilClearEmptyKey } from "@/assets/utils";
import { basicSetup } from "codemirror";
import { EditorView, keymap } from "@codemirror/view";
import { indentWithTab } from "@codemirror/commands";
import { oneDark } from "@codemirror/theme-one-dark";
import { vue } from "@codemirror/lang-vue";
function initCodeContent() {
  nextTick(() => {
    new EditorView({
      doc: codeTemplate.value,
      extensions: [basicSetup, oneDark, keymap.of([indentWithTab]), vue()],
      parent: document.querySelector("#coder") as Element
    });
  });
}
const dragStore = useDrag();
const createCodeDioRef = ref();
const codeTemplate = ref("");
function copyCode() {
  utilCopyLink(codeTemplate.value);
}

function createCodeFn() {
  let templateVue = "";
  let scripVue = "";
  let scripImport = "";
  let scripOnmouted = "";
  let formType = ["searchForm", "diologForm",  "pageForm",'drawForm'];
  let has = dragStore.renderData.find((item) => {
    return formType.includes(item.key)||(item.key=='cTable'&&item.highEdit.emitToOpen);
  });
  if (has) {
    scripImport = `
    import { pageEmit } from "@/components/HfSuperForm/super-form";`;
  }
  dragStore.renderData.map((iteem) => {
    let item = utilClearEmptyKey(iteem) as IStdOContainerRender;
    // if (formType.includes(item.key)) {
      let otherMethods=[]
    if (item.type == "container") {
      let renderMap;
      let renderMaped = dragStore.registerConfig.componentMap[item.type];
      if (renderMaped.type !== "container") return;
      renderMap = renderMaped.headerOpt;
      if (item.key.includes("cForm_u")) {
        if (item.props.otherGetFile) {
          otherMethods.push("emitOtherGetFile");
          scripVue += `
function emitOtherGetFile({ e, props }) {}`;
        }
      }
      if (item.key == "cTable") {
        if (item.props.emitAfterGetData) {
          otherMethods.push("emitAfterGetData");
          scripVue += `
function emitAfterGetData(res) {}`;
        }
        if (item.props.emitDeleteAfter) {
          otherMethods.push("emitDeleteAfter");
          scripVue += `
function emitDeleteAfter() {}`;
        }
        if (item.props.emitBeforeGetList) {
          otherMethods.push("emitBeforeGetList");
          scripVue += `
function emitBeforeGetList(obj, pageSize) {}`;
        }
      }
      templateVue = templateVue + renderMap.template(item,otherMethods);
      scripOnmouted = scripOnmouted + renderMap.onMountedScript(item);
      item.childrens.map((ite) => {
        if (ite.type == "formItem" && item.key !='cTable') {
          if (!item.props.formOpt) item.props.formOpt = {};
          if (!item.props.formOpt.items) item.props.formOpt.items = {};
          item.props.formOpt.items[ite.props.itemKey] = ite.props.item;
          if (ite.highEdit?.itemValue) {
            if (!item.formParams) item.props.formParams = {};
            item.props.formParams[ite.props.itemKey] = ite.highEdit.itemValue;
          }
          ite.props.item.values.map((it: any) => {
            delete it.valueType;
          });
        }
        if (ite.type == "tableItem") {
          if (!item.props.tableOpt) item.props.tableOpt = {};
          if (!item.props.tableOpt.columns) item.props.tableOpt.columns = [];
          item.props.tableOpt.columns.push(ite.props.column);
        }
      });
      scripVue = scripVue + renderMap.script(item);
    }
  });
  codeTemplate.value =
    `<template>
  <div class="container">${templateVue}
  </div>
</template>
<script setup lang="ts">${scripImport}${scripVue}
</scrip` + "t>";
  createCodeDioRef.value.compontOpen = true;
  initCodeContent();
}
</script>
<style scoped>
#coder {
  margin-top: 10px;
  width: 100%;
  overflow: auto;
  height: 800px;
}
</style>
